<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>云钢</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        .aui-bar-light{ color: black; }
        .aui-bar-nav.aui-bar-light .aui-iconfont{ color: black; }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" onclick="backpage()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">标题</div>
    </header>
    <div id="app" v-cloak>
        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active">全部(0)</div>
            <div class="aui-tab-item"><div></div>待签合同(0)</div>
            <div class="aui-tab-item">待发货(0)</div>
            <div class="aui-tab-item">待收货(0)</div>
            <div class="aui-tab-item">已完成(0)</div>
        </div>
        <div id="all" class="padding-lr hidden">
            <div class="aui-card-list aui-border-t aui-border-b margin-top padding-bottom">
                <div class="aui-card-list-header aui-card-list-user margin-top solid-bottom">
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">订单编号：202104111564</div>
                        <div class="aui-text-danger text-md text-yg">待签合同</div>
                    </div>
                </div>
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../image/me/header.jpg" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">钢材售卖货品名称</div>
                        <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                    </div>
                    <div class="aui-card-list-user-info">
                        <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                    </div>
                </div>
                <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                    <i class="aui-iconfont aui-icon-calendar"></i>
                                    <span class="aui-text-danger">剩余数量：548吨</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                    <i class="aui-iconfont aui-icon-date"></i>
                                    <span class="text-gray">时间：2021-04-26 17:23</span>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="flex-between padding-lr">
                        <div></div>
                        <div class="flex-between">
                            <div class="aui-btn aui-btn-info round xq margin-right">去签合同</div>
                            <div class="aui-btn aui-btn-info round xq">订单详情</div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-card-list aui-border-t aui-border-b margin-top padding-bottom">
                <div class="aui-card-list-header aui-card-list-user margin-top solid-bottom">
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">订单编号：202104111564</div>
                        <div class="aui-text-danger text-md text-yg">待发货</div>
                    </div>
                </div>
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../image/me/header.jpg" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">钢材售卖货品名称</div>
                        <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                    </div>
                    <div class="aui-card-list-user-info">
                        <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                    </div>
                </div>
                <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                    <i class="aui-iconfont aui-icon-calendar"></i>
                                    <span class="aui-text-danger">剩余数量：548吨</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                    <i class="aui-iconfont aui-icon-date"></i>
                                    <span class="text-gray">时间：2021-04-26 17:23</span>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="flex-between padding-lr">
                        <div></div>
                        <div class="aui-btn aui-btn-info round xq">订单详情</div>
                    </div>
                </div>
            </div>
            <div class="aui-card-list aui-border-t aui-border-b margin-top padding-bottom">
                <div class="aui-card-list-header aui-card-list-user margin-top solid-bottom">
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">订单编号：202104111564</div>
                        <div class="aui-text-danger text-md text-yg">待收货</div>
                    </div>
                </div>
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../image/me/header.jpg" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">钢材售卖货品名称</div>
                        <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                    </div>
                    <div class="aui-card-list-user-info">
                        <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                    </div>
                </div>
                <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                    <i class="aui-iconfont aui-icon-calendar"></i>
                                    <span class="aui-text-danger">剩余数量：548吨</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                    <i class="aui-iconfont aui-icon-date"></i>
                                    <span class="text-gray">时间：2021-04-26 17:23</span>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="flex-between padding-lr">
                        <div></div>
                        <div class="flex-between">
                            <div class="aui-btn aui-btn-info round xq margin-right">物流信息</div>
                            <div class="aui-btn aui-btn-info round xq">订单详情</div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-card-list aui-border-t aui-border-b margin-top padding-bottom">
                <div class="aui-card-list-header aui-card-list-user margin-top solid-bottom">
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">订单编号：202104111564</div>
                        <div class="aui-text-danger text-md text-yg">已完成</div>
                    </div>
                </div>
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../image/me/header.jpg" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">钢材售卖货品名称</div>
                        <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                    </div>
                    <div class="aui-card-list-user-info">
                        <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                    </div>
                </div>
                <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                    <i class="aui-iconfont aui-icon-calendar"></i>
                                    <span class="aui-text-danger">剩余数量：548吨</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                    <i class="aui-iconfont aui-icon-date"></i>
                                    <span class="text-gray">时间：2021-04-26 17:23</span>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="flex-between padding-lr">
                        <div></div>
                        <div class="flex-between">
                            <div class="aui-btn aui-btn-info round xq margin-right" tapmode onclick="openDialog('text')">删除订单</div>
                            <div class="aui-btn aui-btn-info round xq">订单详情</div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-card-list aui-border-t aui-border-b margin-top padding-bottom">
                <div class="aui-card-list-header aui-card-list-user margin-top solid-bottom">
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">订单编号：202104111564</div>
                        <div class="aui-text-danger text-md text-yg">已失效</div>
                    </div>
                </div>
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../image/me/header.jpg" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">钢材售卖货品名称</div>
                        <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                    </div>
                    <div class="aui-card-list-user-info">
                        <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                    </div>
                </div>
                <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                    <i class="aui-iconfont aui-icon-calendar"></i>
                                    <span class="aui-text-danger">剩余数量：548吨</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                            <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                    <i class="aui-iconfont aui-icon-date"></i>
                                    <span class="text-gray">时间：2021-04-26 17:23</span>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="flex-between padding-lr">
                        <div></div>
                        <div class="flex-between">
                            <div class="aui-btn aui-btn-info round xq margin-right" tapmode onclick="openDialog('text2')">失效原因</div>
                            <div class="aui-btn aui-btn-info round xq">删除订单</div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js" ></script>
<script type="text/javascript" src="../../script/aui-dialog.js" ></script>


<script type="text/javascript">

    var vm = {
        el: '#app',
        data: {
            list: []
        },
        mounted: function(){
            this.getList();
        },
        methods: {
            getList: function(){
                let that = this;
            }
        }
    }
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
        // window.app = new Vue(vm);
        

    };

    function backpage(){
        api.closeWin({
            name: api.winName
        })
        
    };
    apiready = function(){
        api.parseTapmode();
    }
    var tab = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        console.log(ret)
    });
    apiready = function () {
        api.parseTapmode();
    }
    var dialog = new auiDialog();
    function openDialog(type){
        switch (type) {
            case "text":
                dialog.alert({
                    title:"提示",
                    msg:'删除订单后，则无法再查看该订单详情，请您谨慎选择~',
                    buttons:['暂时不删了','确定删除']
                },function(ret){
                    console.log(ret)
                })
                break;
        }
        switch (type) {
            case "text2":
                dialog.alert({
                    title:"失效原因",
                    msg:'因您/采购方长时间未签电子合同，该订单已自动关闭，所以失效了~',
                    buttons:['好的，知道了']
                },function(ret){
                    console.log(ret)
                })
                break;
        }
    }
</script>

</html>
